import { useState } from 'react';
const Test = () => {
  return <button>点我啊</button>
}



function App() {
  const [count, setCount] = useState(0);

  const clk = () => {
    setCount(count + 1);
    console.log(count);  // 0, 1, 2...
  }

  const [form, setForm] = useState({ name: 'jack' });

  const clk2 = () => {
    setForm({ name: 'mary' })
  }

  const [value, setValue] = useState('jack')

  return (
    <div>
      <h2>组件化：</h2>
      <hr />
      <Test />
      <hr />
      <button onClick={clk}>点击 {count}</button>
      <button onClick={clk2}>修改form{form.name}</button>

      <h3>受控绑定表单</h3>

      <input value={value} onChange={(e) => setValue(e.target.value)} ></input>

    </div>
  )
}

export default App